<template>
  <el-scrollbar v-loading="loading" class="scrollBox" style="height: 350px">
    <span v-for="(item, i) in associationCommunityList" :key="i">
      <span> {{ item.communityName }}</span>
      <span v-if="i + 1 < associationCommunityList.length"> 、</span>
    </span>
  </el-scrollbar>
</template>

<script lang="ts" setup>
import { basicConfigService } from '@/api/basicConfig'
import { Debounce } from '@/hooks/throttle'

const props = defineProps({
  selectList: {
    type: Array,
  },
  selectCommunity: {
    type: Array,
  },
})
const loading = ref(false)
watch(
  () => [...props.selectList],
  Debounce((val) => {
    if (val) {
      getpageListCommunityResDto()
    } else {
      associationCommunityList.value = []
    }
  }, 1000),
  { flush: 'post' }
)
const ids = computed(() => {
  return props.selectList.map((e: any) => e.areaId)
})
const associationCommunityList = ref([])
const getpageListCommunityResDto = () => {
  if (props.selectCommunity.length > 0) {
    associationCommunityList.value = [...props.selectCommunity]
    return
  }
  loading.value = true
  basicConfigService
    .pageListCommunityResDto({
      data: {
        areaIdList: [...ids.value],
      },
      pageSize: 999,
      pageNumber: 1,
    })
    .then((res) => {
      loading.value = false
      if (props.selectCommunity.length == 0) {
        associationCommunityList.value = res.data.content
      } else {
        associationCommunityList.value = [...props.selectCommunity]
      }
    })
    .catch(() => {
      loading.value = false
    })
}
onMounted(() => {
  if (props.selectList.length > 0) {
    getpageListCommunityResDto()
  }
})
defineExpose({ associationCommunityList })
</script>

<style lang="scss" scoped></style>
